<!-- <template>
    <div v-bind="attrObj">
        {{ index }}
        <button @click="add()">
            点击 +1 
        </button>
    </div>
</template>
使用setup 组合式API 语法糖 
    什么是语法糖：
        定义语法要按照什么样的类型去使用的方式;
<script setup>
    // 用到什么引用什么 
    // 引用 vue3.0的响应式 函数reactive   ref
    // reactive 是 创建数组 和 对象使用的
    // ref 可以 创建任何类型
    import {ref} from 'vue';
    // 使用 普通js定义变量的方式,是没有数据监听的
    // 需要 告诉 setup 语法糖,此变量是需要数据监听
    // let index = 250;
    // 创建了一个响应式的 index对象
    let index = ref(250);

    // 定义变量的方式
    const attrObj = {
        id: 'main',
        class: 'main'
    }

    // 定义事件 原生js写法
    function add(){
        index.value++;
        // 改变index的值,需要改变index;里面的value值
        // console.log(index);
    }
</script>
<style scoped>
    #main{
        color: red;
    }
    .main{
        font-size: 80px;
    }
</style> -->

<template>
    <div>
        <ul>
            <template v-for="(item,index) in arr" :key="index">
                <li v-if="item.age < 40">
                    {{ item.name }} -- {{ item.age }}
                </li>
            </template>
        </ul>
        <button @click="del()">
            李幸 年轻1岁
        </button>
    </div>
</template>
<script setup>
    // 引入 ref 
    import {ref} from 'vue';
    // 创建数组
    const arr = ref([
        {
            name: '刘鹏',
            age: 28
        },
        {
            name: '翟军璞',
            age: 28
        },
        {
            name: '韦玲玲',
            age: 18
        },
        {
            name: '李幸',
            age: 48
        }
    ]);

    // 定义函数
    function del(){
        arr.value[3].age--;
        // console.log();
    }
</script>
<style>
    
</style>